<!DOCTYPE html>
<html>
<head>
<title>Comments</title>
<meta name="description" content="A tree-structured diagram annotated with balloon comments, automatically laid out." />
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="go.js"></script>
<script src="../extensions/BalloonLink.js"></script>
<link href="../assets/css/goSamples.css" rel="stylesheet" type="text/css" />  <!-- you don't need to use this -->
<script src="goSamples.js"></script>  <!-- this is only for the GoJS Samples framework -->
<script id="code">
  function init() {
    if (window.goSamples) goSamples();  // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
        {
          initialContentAlignment: go.Spot.Center,
          layout: $(go.TreeLayout,
                    { angle: 90,
                      setsPortSpot: false,
                      setsChildPortSpot: false
                    }),
          "undoManager.isEnabled": true,
          // When a Node is deleted by the user, also delete all of its Comment Nodes.
          // When a Comment Link is deleted, also delete the corresponding Comment Node.
          "SelectionDeleting": function(e) {
            var parts = e.subject;  // the collection of Parts to be deleted, the Diagram.selection
            // iterate over a copy of this collection,
            // because we may add to the collection by selecting more Parts
            parts.copy().each(function(p) {
              if (p instanceof go.Node) {
                var node = p;
                node.findNodesConnected().each(function(n) {
                  // remove every Comment Node that is connected with this node
                  if (n.category === "Comment") {
                    n.isSelected = true;  // include in normal deletion process
                  }
                });
              } else if (p instanceof go.Link && p.category === "Comment") {
                var comlink = p;  // a "Comment" Link
                var comnode = comlink.fromNode;
                // remove the Comment Node that is associated with this Comment Link,
                if (comnode.category === "Comment") {
                  comnode.isSelected = true;  // include in normal deletion process
                }
              }
            });
          }
        });

    myDiagram.nodeTemplate =
      $("Node", "Auto",
        $("Shape", "CreateRequest",
          { fill: "white" },
          new go.Binding("fill", "color")),
        $("TextBlock",
          { margin: 4 },
          new go.Binding("text", "key"))
      );

    myDiagram.linkTemplate =
      $("Link",
        $("Shape",
          { strokeWidth: 1.5 }),
        $("Shape",
          { toArrow: "Standard", stroke: null })
      );

    myDiagram.nodeTemplateMap.add("Comment",
      $(go.Node,  // this needs to act as a rectangular shape for BalloonLink,
        { background: "transparent" },  // which can be accomplished by setting the background.
        $(go.TextBlock,
          { stroke: "brown", margin: 3 },
          new go.Binding("text"))
      ));

    myDiagram.linkTemplateMap.add("Comment",
      // if the BalloonLink class has been loaded from the Extensions directory, use it
      $((typeof BalloonLink === "function" ? BalloonLink : go.Link),
        $(go.Shape,  // the Shape.geometry will be computed to surround the comment node and
                     // point all the way to the commented node
          { stroke: "brown", strokeWidth: 1, fill: "lightyellow" })
      ));

    myDiagram.model =
      $(go.GraphLinksModel,
        { nodeDataArray: [
            { key: "Alpha", color: "orange" },
            { key: "Beta", color: "lightgreen" },
            { key: "Gamma", color: "lightgreen" },
            { key: "Delta", color: "pink" },
            { key: "A comment", text: "comment\nabout Alpha", category: "Comment" },
            { key: "B comment", text: "comment\nabout Beta", category: "Comment" },
            { key: "G comment", text: "comment about Gamma", category: "Comment" }
          ],
          linkDataArray: [
            { from: "Alpha", to: "Beta" },
            { from: "Alpha", to: "Gamma" },
            { from: "Alpha", to: "Delta" },
            { from: "A comment", to: "Alpha", category: "Comment" },
            { from: "B comment", to: "Beta", category: "Comment" },
            { from: "G comment", to: "Gamma", category: "Comment" }
          ]
        });

    // show the model in JSON format
    document.getElementById("savedModel").textContent = myDiagram.model.toJson();
  }
</script>
</head>
<body onload="init()">
  <div id="sample">
  <h3>GoJS Comments</h3>
    <div id="myDiagramDiv" style="border: solid 1px blue; width:100%; height:400px;"></div>
    <p>
      <b>GoJS</b> supports the notion of "Comment"s.
      A "Comment" is a node that is linked with another node but is positioned by some layouts to go along with that other node,
      rather than be laid out like a regular node and link.
    </p>
    <p>
      In this sample there are three "Comment" nodes, connected with regular nodes by three "Comment" links.
      Node and link data are marked as "Comment"s by specifying "Comment" as the category.
      But the "Comment" nodes and links have a different default template, and thus a different appearance, than regular nodes and links.
      You can specify your own templates for "Comment" nodes and "Comment" links.
      The "Comment" link template defined here uses the <code>BalloonLink</code> class defined in <a href="../extensions/BalloonLink.js">BalloonLink.js</a> in the Extensions directory.
    </p>
    <div style="display: inline">
      Initial Diagram.model saved in JSON format:<br />
      <pre id="savedModel"></pre>
    </div>
  </div>
</body>
</html>
